<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text、v-html</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <h3>{{ data.title }}</h3>
        <h3>{{ data.url }}</h3>

        <div>
            <!-- v-text 将数据解析为纯文本格式 -->
            <h3 v-text="data.title"></h3>
            <h3 v-text="data.url"></h3>

            <!-- v-html 将数据解析为 html 格式 -->
            <h3 v-html="data.title"></h3>
            <h3 v-html="data.url"></h3>
        </div>

        
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'

        /*
          v-text 和插值表达式完成功能一致
        */
        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                // reactive 创建响应式对象，用于存储复杂的数据类型，例如：对象、数组
                const data = reactive({
                    title: "vue学习",
                    url: "<i style='color:blue;'>www.baidu.com</i>"
                })

                return {
                    title: "v-text, v-html",
                    data
                }
            }
        }).mount("#app")
    </script>
</body>
</html>